<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component_Props</title>
    <script src="../Vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <product v-for="item,index in schools" :item="item" :index="index" @c-school="schooler"></product>
        </ul>
        <p>当前位置是:{{finalLocation}}</p>
    </div>

    <script>

        Vue.component('product',{
        	props:['item','index'],
            template: "<li>" +
                "<h3>{{index}}-{{item.schoolName}}</h3>" +
                "<h4>地理位置:{{item.location}}</h4>" +
                "<button @click='changeSchool(item.schoolName)'>选择学校</button>" +
                "</li>",
            methods:{
	            changeSchool:function(schoolName) {
	            	//首先 给按键绑定一个change school的事件
                	//changeSchool事件被触发 发射一个c-school事件给父亲
                    //父亲监听到该事件 继续触发
                    this.$emit('c-school',schoolName)
                }
            }

            }
        )


        let app = new Vue({
            el:"#app",
            data:{
	            finalLocation:'暂无数据',
            	schools:[
                    {
                    	schoolName:'pku',
                        location:'beijing'
                    },
		            {
			            schoolName:'thu',
			            location:'beijing'
		            },
		            {
			            schoolName:'xmu',
			            location:'xiaMen'
		            },
                ]
            },
            methods:{
                schooler:function (schoolName) {
                	console.log('事件被触发')
                    this.finalLocation=schoolName
                }
            }
        })
    </script>
</body>
</html>